<template>
    <view>
		<u-search
			input-align="center"
			height="70" 
			placeholder="搜索资讯标题" 
			v-model="keyword" 
			action-text="搜索" 
			:animation="true" 
			search-icon-color="#999999"
			@custom="searchHistory"
			margin="30rpx 20rpx"
			>
		
		</u-search>

		<u-back-top
				:scroll-top="scrollTop" 
				icon="arrow-up" 
				:icon-style="iconStyle" 
				bottom="200" 
				:custom-style="customStyle" 
				tips="顶部" 
				top="1000">
		</u-back-top>
		
		<!-- 顶部导航栏 -->
		<view class="u-text-center" style="display: flex;" u-m-p-20>
			<div style="width: 300rpx;">
				<u-dropdown ref="uDropdown" @open="open" title-size="27rpx" active-color="#193867">
					<u-dropdown-item v-model="options_value" title="全部分类" :options="options" @change="change"></u-dropdown-item>
				</u-dropdown>
			</div>
			<div style="width: 700rpx;">
				<view style="width: 550rpx; margin-left: -20px;">
					<u-tabs
						font-size="27" 
						:list="sortList" 
						:bar-width="bar_width" 
						item-width="auto"
						@change="changeSort" 
						:is-scroll="false" 
						:current="currentSort"
						active-color="#193867"
						 >
					</u-tabs>
				</view>
			</div>
		</view>
		
		<!-- <view style="background-color: #f2f2f2; height: 25rpx;"></view> -->
	
		<!-- 资讯 -->
		<view class="content" style="background-color: #f2f2f2;">
			<view class="center_box_bg" v-for="item in contentList" :key="item.id">
				
				<view class="profily">
					<view class="news" @click="news_info(item)">
						<view class="news_title">
							<text >{{item.newsTitle}}</text>
						</view>
						<view class="news_content">
							<div class='u-line-3' >
								<view class="u-content" >
									<u-parse v-if="item.imageUrlList" style='width: 200px;' :html="item.newsContent" :selectable="true"></u-parse>
									<u-parse v-else :html="item.newsContent" style='width: 300px;'  :selectable="true"></u-parse>
								</view>
							</div>
			
							<div v-if="item.imageUrlList">
								<image class="news_image"
								   mode="aspectFill" 
								   :src="item.imageUrlList[0]"
									@error="imageError">
								</image>
							</div>
							
						</view>
						<view class="news_zan">
							<view style="margin-right: 10px; color: #193867; font-size: 14px;">
								{{item.classificationName}}
							</view>
							<view style="margin-right: 10px;">
								<u-icon size="30" name="thumb-up-fill" style="margin-right: 3px;"></u-icon> {{item.supportNumber}}
							</view>
							<view style="margin-right: 10px;">
								<u-icon size="30" name="star-fill" style="margin-right: 3px;"></u-icon> {{item.collectionNumber}}
							</view>
							
							{{item.updateTime}}
						</view>
					</view>
				</view>
				
			</view>
			<!-- 到底了 -->
			<view style="display: flex; background-color: #f2f2f2;">
				<view class="" style="background: #c3c3c3; width: 140px; height: 3rpx; margin-top: 20px; margin-left: 40rpx;"></view>
				<view style="margin-top: 10px; margin-left: 5px; margin-right: 5px;">到底了</view>
				<view class="" style="background: #c3c3c3; width: 140px; height: 3rpx; margin-top: 20px;"></view>
			</view>
		</view>
	
		
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: '我是资讯',
				keyword: '',
				sortList:[
					{name:'校友风采'},
					{name:'母校资讯'},
					{name:'最新'},
					{name:'最热'},
					{name:'全部'},
				],
				currentSort: 4,
				bar_width: 75,
				/* 返回顶部 */
				scrollTop: 0,
				customStyle:{
					backgroundColor: '#a0cfff',
					color: '#2979ff'
				},
				iconStyle: {
 					color: '#2979ff',
 					fontSize: '34rpx'
 				},
				
				contentList: [],
				params: {
					page: 1,
					size: 4
				},
				options: [
					{
						label: '所有分类',
						value: "",
					},
				],
				options_value: '',
            }
        }, 
        onLoad() {
			//#ifdef H5
			this.$u.toast("H5不支持此功能")
			//#endif
			
			// #ifdef MP
				if (!this.$u.utils.isLogin()) return
			// #endif
			
			this.getOptions();
			this.getData(this.currentSort);
        },
        methods: {
			//搜索标题
			async searchHistory(value){
				//确定使用XX接口
				this.currentSort=5
				// value自动接收输入框中的内容
				this.params = {
					page: 1,
					size: 4,
					newsTitle: value
				}
				this.changeGetDate();
			},
			
			//顶部导航栏
			changeSort(index){
				this.currentSort=index
				//下方选择导航栏 内部选择置空
				this.options_value = 100
				//协调俩个导航栏的常亮
				this.$refs.uDropdown.close();
				this.$refs.uDropdown.highlight(2);
				this.bar_width = 75
				// console.log(index);
				//重置params
				this.params = {
					page: 1,
					size: 4
				}
				if(index == 0) {
					this.params.newsClassification = 16
				} else if(index == 1) {
					this.params.newsClassification = 17
				}
				this.getData()
			},
			//获取数据
			async getData(){
				//重置商品数据
				/* this.loading = true //显示骨架屏 */
				console.log("params" + this.params);
				//判断是否获取最热
				let res={};
				if (this.currentSort == 2 || this.currentSort == 3) {
					this.params.index = this.currentSort
					res = await this.$u.api.newsSelect(this.params)
				} else {
					res = await this.$u.api.newsSelectBy(this.params)
				}
				
				console.log("互助-列表",res.data);
				if(res.code!="200") {
					uni.showToast({
						icon:"none",
						title:"获取失败，请重试"
					})
				} else if(this.params.page==1){
					this.contentList = res.data
				} else {
					 this.contentList = [...this.contentList, ...res.data]
				}
			},
			//获取类别
			async getOptions() {
				const params = {
					index: 3
				}
				await this.$u.api.getClassificationList(params).then(res=>{
					if(res.code == 200) {
						this.options = [...this.options, ...res.data]
					} else {
						uni.showToast({
							icon:"error",
							title:"类别获取失败"
						})
					}
				})
			},
			//全部分类
			async change(value) {
				//让分页查询知道查哪个
				this.currentSort=5
				this.options_value = value
				//重置params
				this.params = {
					page: 1,
					size: 4
				}
				this.params.newsClassification = value
				this.changeGetDate()
				//所选项高亮并关闭菜单
				this.$refs.uDropdown.highlight();
			},
			async changeGetDate() {
				await this.$u.api.newsSelectBy(this.params).then(res =>  {
					console.log("互助-列表",res.data);
					if(res.code!="200") {
						uni.showToast({
							icon:"none",
							title:"获取失败，请重试"
						})
					} else if(this.params.page==1){
						this.contentList = res.data
					} else {
						 this.contentList = [...this.contentList, ...res.data]
					}
				})
			},
			//触底事件
			onReachBottom() {
				//重新请求数据，带上分页参数
				this.params.page = this.params.page + 1
				if(this.currentSort == 5) {
					// this.change(this.options_value)
					this.changeGetDate()
				} else {
					this.getData()
				}
			},
			//上拉刷新
			onPullDownRefresh() {
				//置空后重新获取第一页
				this.contentList = {}
				this.params.page = 1
				if(this.currentSort == 5) {
					// this.change(this.options_value)
					this.changeGetDate()
				} else {
					this.getData()
				}
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			//返回顶部
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			news_info(newsInfo) {
				uni.navigateTo({
					url: '/pages/news/news_info?info=' + encodeURIComponent(JSON.stringify(newsInfo)),
				})
			},
			open(index) {
				//协调俩个导航栏的常亮
				this.currentSort = -1
				this.bar_width=0
				// console.log(index);
				this.params = {
					page: 1,
					size: 4
				}
				// 关闭原来的其他菜单的高亮，同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight(index);
			},
        }
    }
</script>

<style lang="scss">

	.content {
	    height: 90vh;
		background-color: #f2f2f2;
	}
	.center_box_bg {
		background-color: #f2f2f2;
		display: flex;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			// height: 180px;
			display: flex;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 0px 0px 5px #bebebe;
		}
	}
	.button {
		background-color: #193867;
		margin-top: 16px;
		margin-right: 10px;
		color:white;
		width: 100px;
		height: 34px;
		border:0;
		font-size: 14px;
		color: #f2f2f2;
		border-radius: 30px;
	}
	.class {
		width: 300px;
	}
	.news {
		.news_title {
			display: flex;
			font-weight: 800; 
			font-size: 15px; 
			/* margin-left: 25px; */
			width: 300px;
		}
		.news_content {
			font-size: 14px;
			/* margin-left: 25px; */
			margin-top: 10px; 
			display: flex;
			height: 55px;
			// position: relative; /* 置图层底*/
		}
		.news_zan {
		/* 	margin-left: 25px; */
			margin-top: 20px; 
			color: #bfbfbf; 
			display: flex;
		}
		.news_image {
			width: 200rpx;
			height: 120rpx; 
			background-color: #eeeeee; 
			border-radius: 10px;
			background-color: rgba(135, 135, 135, 0.5);
		}
	}
	
</style>